<template>
  <div class="card-container">
    <a-tabs type="card" v-model="tabsKey" @change="tabChange">
      <!-- disabled -->
      <a-tab-pane :disabled="$route.query.edit == undefined? true : false" tab="基本信息" :key="1">
        <BasicInfo v-if="tabsBool1"></BasicInfo>
      </a-tab-pane>
      <a-tab-pane :disabled="$route.query.edit == undefined? true : false" tab="基本信息（二）" :key="2">
        <Protocol v-if="tabsBool2"></Protocol>
      </a-tab-pane>
      <a-tab-pane v-if="routerShow($route,'register_list')" :disabled="$route.query.edit == undefined? true : false" tab="寄存器" :key="3">
        <Register v-if="tabsBool3"></Register>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  // import UploadImage from '@C/upload/UploadImage';
  import { mapState, mapActions } from 'vuex';
  import Vue from "vue";
  import { USER } from "@/store/mutation-types";
  import { BasicInfo, Protocol, Register } from './components';
  // import { log } from 'util';
  export default {
    name: "Add",
    components: {
      BasicInfo,
      Protocol,
      Register,
      
    },
    data() {
      return {
        userData:'',// 权限
        tabsKey: 1,
        tabsBool1: true,
        tabsBool2: true,
        tabsBool3: true,
      }
    },
    computed: {
      isAdmin() {
          if (this.userData.role_grade === 1) {
              return 1;
          } else if (this.userData.role_grade === 2)  {
              return 2;
          } else if (this.userData.role_grade === 3) {
              return 3;
          }
      }
    },
    mounted() {
      this.userData = Vue.ls.get(USER);
      if(this.$route.query.tabsKey !== undefined) {
        this.tabsKey = Number(this.$route.query.tabsKey)
      } else {
        this.$router.push({ query: { tabsKey: this.tabsKey } })
      }
    },
    watch: {
			$route(newValue, oldValue) {
				if(this.$route.query.tabsKey !== undefined) {
          this.tabsKey = this.$route.query.tabsKey
        }
        // if(this.$route.query.edit == undefined) {
        //   this.$router.push({
        //     path: '/equipment/Add',
        //     query: {
        //       tabsKey: 1,
        //     }
        //   })
        // }
      }
		},
    methods: {
      tabChange(key) {
        if(key == 1) {
          this.tabsBool1 = false
          this.$nextTick(() => (this.tabsBool1 = true))
        } else if(key == 2){
          this.tabsBool2 = false
          this.$nextTick(() => (this.tabsBool2 = true))
        } else {
          this.tabsBool3 = false
          this.$nextTick(() => (this.tabsBool3 = true))
        }
        // this.$router.push({ 
        //   query: { 
        //     tabsKey: key,
        //   } 
        // })
      }
    },
  }
</script>

<style scoped>
  .card-container {
    background: #F5F5F5;
    overflow: hidden;
    padding: 24px;
  }

  .card-container>.ant-tabs-card>.ant-tabs-content {
    height: 120px;
    margin-top: -16px;
  }

  .card-container>.ant-tabs-card>.ant-tabs-content>.ant-tabs-tabpane {
    background: #fff;
    padding: 16px;
  }

  .card-container>.ant-tabs-card>.ant-tabs-bar {
    border-color: #fff;
  }

  .card-container>.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab {
    border-color: transparent;
    background: transparent;
  }

  .card-container>.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab-active {
    border-color: #fff;
    background: #fff;
  }
</style>
